<template>
  <div class="user-info-container">
    <MMNavBar title="我的资料" back="/my"></MMNavBar>
    <div class="main-container">
      <MMCell class="avatar-cell" title="头像" @click="toEditinfo('avatar')" >
        <img class="avatar" :src="avatarUrl" />
      </MMCell>
      <!-- 底部信息栏 -->
      <div class="cell-box">
        <MMCell
          :value="userInfo.nickname"
          title="昵称"
          @click="toEditinfo('nickname')"
        ></MMCell>
        <MMCell :value="genderText" @click="showGender" title="性别"></MMCell>
        <MMCell :value="areaText" @click="showArea" title="地区"></MMCell>
        <!-- 简直了,这个昨天晚上一直无法干掉的跳转,早上再重写一遍,好了.....他妈的 -->
        <MMCell :value="userInfo.intro"
         title="个人简介"
        @click="toEditinfo('intro')"
         ></MMCell>
      </div>
      <!-- 退出的按钮也可以使用封装好的组件 -->
      <van-button class="logout-btn"
      @click="logOut"
      type="default">退出</van-button>
    </div>
    <!-- 性别弹框 -->
    <van-popup v-model="isShowGender" round position="bottom">
      <!-- 添加ref的目的就是为了在下面的方法中获取到这个组件,跟原生的ref的用法基本一致 -->
      <van-picker
        ref="genderPicker"
        show-toolbar
        :columns="genderColumns"
        @cancel="isShowGender = false"
        @confirm="onGenderConfirm"
      />
    </van-popup>
        <!-- 地区弹框 -->
    <van-popup v-model="isShowArea" round position="bottom">
      <van-area
        title="省市"
        ref="areaPicker"
        columns-num="2"
        @cancel="isShowArea = false"
        @confirm="onAreaConfirm"
        :area-list="areaList"
      />
    </van-popup>
  </div>
</template>

<script>
import MMNavBar from '../../components/MMNavBar'
import MMCell from '../../components/MMCell'
// 辅助函数
import { mapState, mapGetters, mapMutations } from 'vuex'
// 导入修改用户信息的方法
import { editUserInfo } from '@/api/my'
// 省市数据
import areaList from '../../utils/area'
import { removeToken } from '../../utils/token'
export default {
  name: 'user-info-container',
  data () {
    return {
      // 是否显示性别弹框
      isShowGender: false,
      // 性别绑定的数据
      genderColumns: ['未知', '靓仔', '靓妹'],
      // 省市区数据
      areaList,
      // 是否显示省市区弹框
      isShowArea: false
    }
  },
  components: {
    MMNavBar,
    MMCell
  },
  // 计算属性
  computed: {
    // 个性的签名,昵称,职位这些都在userinfo之中
    ...mapState(['userInfo']),
    // 头像
    ...mapGetters(['avatarUrl', 'genderText', 'areaText'])
  },
  methods: {
    // 更改本地数据没看太明白 去store看一下注释,都写明白了
    ...mapMutations(['CHANGEPROP', 'CHANGEUSERINFO', 'CHANGEISLOGIN']),
    toEditinfo (prop) {
      this.$router.replace(`/editInfo?prop=${prop}`)
      // this.$router.replace('/editInfo')
    },
    // 让性别选择框显示出来 同时打开的时候就显示默认值
    showGender () {
      this.isShowGender = true
      // $nextTick 数据更改,且页面更新完毕之后触发vue自己封装的方法
      this.$nextTick(() => {
        console.log(this.$refs.genderPicker)
        console.log(this.userInfo.gender)
        // 插件自带的方法,为弹出框选择默认的值 调用setColumnValue
        // 行号 value值:(对应的column的value)
        this.$refs.genderPicker.setColumnValue(0, this.genderText)
      })
    },
    // 点击确认按钮,改变性别,同时改变后台数据
    onGenderConfirm (value, index) {
      console.log('value:', value)
      console.log('index:', index)
      this.$toast.loading('修改中.....')
      this.isShowGender = false
      editUserInfo({
        gender: index
      }).then(res => {
        console.log('res:', res)
        if (res.data.code === 200) {
          // 获取成功
          this.$toast.success('修改成功')
          // 修改本地数据 把这个对象传递给store中定义好的事件
          // 让他去接收,应该就是map去接收这个对象
          this.CHANGEPROP({
            propName: 'gender',
            propValue: index
          })
        }
      })
    },
    // 显示选择地区的选择框
    showArea () {
      this.isShowArea = true
      this.$nextTick(() => {
        // 设置选中
        this.$refs.areaPicker.reset(this.userInfo.area)
      })
    },
    // 确认省市选择
    onAreaConfirm (data) {
      console.log(data)
      this.isShowArea = false
      this.$toast.loading('修改...')
      editUserInfo({
        area: data[1].code
      }).then(res => {
        if (res.data.code === 200) {
          // 成功
          this.$toast.success('修改成功')
          // 修改本地
          this.CHANGEPROP({
            propName: 'area',
            propValue: data[1].code
          })
        }
      })
    },
    // 点击退出,删除tolen,退出登录
    logOut () {
      this.$dialog.confirm({
        title: '提示',
        message: '确定要走么'
      })
        .then(() => {
          // on confirm
          // 删除token
          removeToken()
          // 修改isLogin 和 userInfo
          this.CHANGEUSERINFO({})
          this.CHANGEISLOGIN(false)
          // 去 其他页面
          this.$router.replace('/login')
        })
        .catch(() => {
          // on cancel
        })
    }
  }
}
</script>

<style lang="less">
.user-info-container {
  .main-container {
    padding-top: 18px;
    padding-left: 15px;
    padding-right: 15px;
    // background-color: @assist-color;
    .first-cell {
      border-radius: 8px;
      overflow: hidden;
    }
    .avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      margin-top: 6.5px;
    }
    .avatar-cell {
      // 单独给第一个设置圆角样式
      border-radius: 8px;
    }
    .cell-box {
      border-radius: 8px;
      margin-top: 10px;
      overflow: hidden;
    }
    .logout-btn {
      margin-top: 15px;
      border-radius: 8px;
      width: 345px;
      height: 50px;
      .van-button__text {
        color: @main-color;
      }
    }
  }
}
</style>
